<template>
    <view class="u-countdown">
        <view class="u-countdown-item" :style="[itemStyle]">
            <view class="u-countdown-time" :style="[letterStyle]">{{ h }}</view>
        </view>
        <view class="u-countdown-colon" :style="{ fontSize: separatorSize + 'rpx', color: separatorColor }">
            {{ separator == 'colon' ? ':' : '时' }}
        </view>
        <view class="u-countdown-item" :style="[itemStyle]">
            <view class="u-countdown-time" :style="[letterStyle]">{{ i }}</view>
        </view>
        <view class="u-countdown-colon" :style="{ fontSize: separatorSize + 'rpx', color: separatorColor }">
            {{ separator == 'colon' ? ':' : '分' }}
        </view>
        <view class="u-countdown-item" :style="[itemStyle]">
            <view class="u-countdown-time" :style="[letterStyle]">{{ s }}</view>
        </view>
        <view class="u-countdown-colon" :style="{ fontSize: separatorSize + 'rpx', color: separatorColor }">
            
        </view>
    </view>
</template>

<script>
export default {
    name: 'u-count-down',
    props: {
        autoplay: {
            type: Boolean,
            default: true
        },
        separator: {
            type: String,
            default: 'colon'
        },
        separatorSize: {
            type: [Number, String],
            default: 30
        },
        separatorColor: {
            type: String,
            default: "#303133"
        },
        color: {
            type: String,
            default: '#303133'
        },
        fontSize: {
            type: [Number, String],
            default: 30
        },
        bgColor: {
            type: String,
            default: '#fff'
        },
        height: {
            type: [Number, String],
            default: 'auto'
        },
        showBorder: {
            type: Boolean,
            default: false
        },
        borderColor: {
            type: String,
            default: '#303133'
        },
        showSeconds: {
            type: Boolean,
            default: true
        },
        showMinutes: {
            type: Boolean,
            default: true
        },
        showHours: {
            type: Boolean,
            default: true
        },
        showDays: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            h: '00', // 小时的默认值
            i: '00', // 分钟的默认值
            s: '00', // 秒的默认值
            timer: null, // 定时器
            elapsedTime: 0 // 记录经过的时间（秒）
        };
    },
    computed: {
        itemStyle() {
            let style = {};
            if (this.height) {
                style.height = this.height + 'rpx';
                style.width = this.height + 'rpx';
            }
            if (this.showBorder) {
                style.borderStyle = 'solid';
                style.borderColor = this.borderColor;
                style.borderWidth = '1px';
            }
            if (this.bgColor) {
                style.backgroundColor = this.bgColor;
            }
            return style;
        },
        letterStyle() {
            let style = {};
            if (this.fontSize) style.fontSize = this.fontSize + 'rpx';
            if (this.color) style.color = this.color;
            return style;
        }
    },
    mounted() {
        if (this.autoplay) {
            this.startTimer();
        }
    },
    methods: {
        startTimer() {
            this.clearTimer();
            this.timer = setInterval(() => {
                this.elapsedTime++;
                this.updateDisplayTime();
            }, 1000);
        },
        updateDisplayTime() {
            const totalSeconds = this.elapsedTime;
            const hours = Math.floor(totalSeconds / 3600);
            const minutes = Math.floor((totalSeconds % 3600) / 60);
            const seconds = totalSeconds % 60;

            this.h = hours < 10 ? '0' + hours : hours;
            this.i = minutes < 10 ? '0' + minutes : minutes;
            this.s = seconds < 10 ? '0' + seconds : seconds;
        },
        clearTimer() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        beforeDestroy() {
            this.clearTimer();
        }
    }
};
</script>

<style scoped lang="scss">
.u-countdown {
    display: inline-flex;
    align-items: center;
}

.u-countdown-item {
    padding: 2rpx;
    border-radius: 6rpx;
    white-space: nowrap;
}

.u-countdown-time {
    margin: 0;
    padding: 0;
    line-height: 1;
}

.u-countdown-colon {
    padding: 0 5rpx;
    line-height: 1;
}
</style>
